////
/// Components
/// Hamburger keyframes
////

@import 'props';

@keyframes FadeActivator {
  to {
    opacity: 1;
  }
}

@keyframes HamburgerBefore-In {
  0% {
    transform: translateY(0) rotate(0);
  }

  50% {
    transform: translateY($hamburger-vertical-center) rotate(0);
  }

  100% {
    transform: translateY($hamburger-vertical-center) rotate(45deg);
  }
}

@keyframes HamburgerBefore-Out {
  0% {
    transform: translateY($hamburger-vertical-center) rotate(45deg);
  }

  50% {
    transform: translateY($hamburger-vertical-center) rotate(0);
  }

  100% {
    transform: translateY(0) rotate(0);
  }
}

@keyframes HamburgerAfter-In {
  0% {
    transform: translateY($hamburger-after-y) rotate(0);
  }

  50% {
    transform: translateY($hamburger-vertical-center) rotate(0);
  }

  100% {
    transform: translateY($hamburger-vertical-center) rotate(-45deg);
  }
}

@keyframes HamburgerAfter-Out {
  0% {
    transform: translateY($hamburger-vertical-center) rotate(-45deg);
  }

  50% {
    transform: translateY($hamburger-vertical-center) rotate(0);
  }

  100% {
    transform: translateY($hamburger-after-y) rotate(0);
  }
}

@keyframes HamburgerPatty-In {
  0%,
  25% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

@keyframes HamburgerPatty-Out {
  0%,
  25% {
    opacity: 0;
  }

  50%,
  100% {
    opacity: 1;
  }
}
